<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML表格</title>
	</head>
	<body>
		<!-- HTML的表格
			1.表格标签为<table>,每个表格均有若干行用<tr>，每行被分割为若干单元格用<td>。
			2.<td>元素指表格的单元格内容，其内容可以是文本、图片、列表、段落、表单、水平线、表格等
			3.表格的边框属性为border，不定义时将不显示边框
			4.表格的表头使用<th>标签进行定义（文本一般会被粗体居中）
			5.单元格内无内容时不会显示该单元格边框（常用空格占位符&nbsp解决） -->
		<h1>HTML的表单</h1>
			<p>没有边框的表格</p>
			<table>
				<tr>
					<td>老大</td>
					<td>伊藤润二</td>
				</tr>
				<tr>
					<td>张三</td>
					<td>李四</td>
				</tr>
			</table>
			<p>带有标题的列表</p>
			<table border="2">
				<caption>名单</caption><!-- 表单标题标签 -->
				<th>一班</th><th>二班</th>
				<tr>
					<td>老大</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>张三</td>
					<td>李四</td>
				</tr>
			</table>
			<table border="1">
				<caption>横跨俩列的单元格标签</caption>
				<th>姓名</th>
				<th colspan="2">电话</th><!-- colspan水平合并单元格 -->
				<tr>
					<td>傻鸟</td>
					<td>108874</td>
					<td>15157</td>
				</tr>
			</table>
			<table border="1">
				<caption>横跨俩行的单元格</caption>
				<tr>
					<th>姓名</th>
					<td>傻鸟</td></tr>
				<tr>
					<th rowspan="2">电话</th><!-- rowspan垂直合并单元格 -->
					<td>18874</td>
				</tr>
				<tr>
					<td>15157</td>
				</tr>
			</table>
			<table border="1">
				<caption>表格单元格内容多样</caption>
				<tr>
					<td>
						<p>这是一个段</p>
						<p>这是另一个段</p>
					</td>
				
				<td>
					<p>这里包含了另一个表格</p>
					<table border="1">
						<tr>
							<td>A</td>
							<td>B</td>
						</tr>
						<tr>
							<td>C</td>
							<td>D</td>
						</tr>
					</table>
				</td>
				</tr>
				<tr>
					<td>
						<ul>
							<p>这是一个列表</p>
							<li>苹果</li>
							<li>香蕉</li>
							<li>菠萝</li>
						</ul>
					</td>
					<td>
						HELLO
					</td>
				</tr>
			</table>
			<table border="1" cellpadding="20"><!-- cellpadding单元格内边距设置属性 -->
				<caption>单元格边距</caption>
				<tr>
					<td>老大</td>
					<td>伊藤润二</td>
				</tr>
				<tr>
					<td>张三</td>
					<td>李四</td>
				</tr>
			</table>
			<table border="1" cellspacing="10"><!-- cellspacing单元格间距属性 -->
				<caption>单元格间距</caption>
				<tr>
					<td>老大</td>
					<td>伊藤润二</td>
				</tr>
				<tr>
					<td>张三</td>
					<td>李四</td>
				</tr>
			</table>
			<table border="1" bgcolor="red">
				<caption>表格背景颜色</caption>
				<tr>
					<td background="img/绿.gif">单元格的设置同理</td>
					<td>伊藤润二</td>
				</tr>
				<tr>
					<td>张三</td>
					<td>李四</td>
				</tr>
			</table>
			<table border="1" background="img/绿.gif">
				<caption>表格图像背景设置</caption>
				<tr>
					<td > 单元格的设置同理</td>
					<td>伊藤润二</td>
				</tr>
				<tr>
					<td bgcolor="red">张三</td>
					<td>李四</td>
				</tr>
			</table>
			<table border="1" width="400">
				<caption>单元格内文本排列</caption>
				<tr>
					<th align="left">消费项目...</th>
					<th align="right">一月</th>
					<th align="right">二月</th>
				</tr>
				<tr>
					<td align="left">衣服</td>
					<td align="right">￥241.10</td>
					<td align="right">￥50.20</td>
				</tr>
				<tr>
					<td align="left">化妆品</td>
					<td align="right">￥30.00</td>
					<td align="right">￥44.45</td>
				</tr>
				<tr>
					<td align="left">食物</td>
					<td align="right">￥730.40</td>
					<td align="right">￥650.00</td>
				</tr>
				<tr>
					<th align="left">总计</th>
					<th align="right">￥1001.50</th>
					<th align="right">￥744.65</th>
				</tr>
			</table>
			<p>框架属性frame，在IE浏览器中无法正确显示</p>
			<p>外边框</p>
			<table frame="box">
				<tr>
					<th>month</th>
					<th>Savings</th>
				</tr>
				<tr>
					<td>January</td>
					<td>$100</td>
				</tr>
			</table><br />
			<p>上边框</p>
			<table frame="above">
				<tr>
					<th>month</th>
					<th>Savings</th>
				</tr>
				<tr>
					<td>January</td>
					<td>$100</td>
				</tr>
			</table><br />
			<p>下边框</p>
			<table frame="below">
				<tr>
					<th>month</th>
					<th>Savings</th>
				</tr>
				<tr>
					<td>January</td>
					<td>$100</td>
				</tr>
			</table><br />
			<p>上下边框</p>
			<table frame="hsides">
				<tr>
					<th>month</th>
					<th>Savings</th>
				</tr>
				<tr>
					<td>January</td>
					<td>$100</td>
				</tr>
			</table><br />
			<p>左右边框</p>
			<table frame="vsides">
				<tr>
					<th>month</th>
					<th>Savings</th>
				</tr>
				<tr>
					<td>January</td>
					<td>$100</td>
				</tr>
			</table><br />
			<br />
			<a href="6.HTML列表.html" style="text-decoration:none">上一节</a>
			<a href="8.HTML的表单.html" style="text-decoration:none">&nbsp;下一节</a>
	</body>
</html>